<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/index.css">
    <link rel="stylesheet" href="/static/css/moviedata.css">
    <link rel="stylesheet" href="/static/css/clear.css">
    <link rel="stylesheet" type="text/css" href="/static/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/htmleaf-demo.css">
    <link rel="stylesheet" type="text/css" href="/static/css/star-rating-svg.css">
    <link rel="stylesheet" type="text/css" href="/static/css/demo.css">
    <script src="/static/js/jquery-1.12.2.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title th:text="${movieDetailVo.name}">天气之子</title>
    <link rel="icon" href="/static/images/title-lolg.png">
</head>

<body>

<!-- 头部导航 -->
<div th:replace="/common/head::#header"></div>
<!-- 电影简介 -->
<div class="movie-top">
    <div class="movie-banner">
        <div class="movie-img">
            <img th:src="${movieDetailVo.previewUrl}" alt="" id="movie-img">
        </div>
        <div class="movie-data">
            <div class="movie-name">
                <h2 class="name" th:text="${movieDetailVo.name}" id="moviename"></h2>
                <h2 class="othername" th:text="${movieDetailVo.englishName}" id="englishname"></h2>
                <p class="kind" id="kind">
                    <span th:each="movieType:${movieDetailVo.movieTypes}" th:text="${movieType+' '}"></span>
                </p>
                <p class="area" id="adress">
                    <span th:each="movieArea:${movieDetailVo.movieAreas}" th:text="${movieArea+'/'}"></span>
                    <span th:text="${movieDetailVo.duration}"></span>
                </p>
                <p class="time" id="time"
                   th:text="${#dates.format(movieDetailVo.releaseDate,'yyyy-MM-dd')+'中国大陆上映'}"></p>
            </div>
            <div class="movie-btn" style="margin-top: -20px">
                <a href="javascript:void(0)" th:onclick="wantSee([[${movieDetailVo.id+''}]])">

                    <div th:if="${movieDetailVo.whetherWatch==0}">
                        <i id="watchImg"
                           style="background: url() no-repeat 1px 2px"></i>
                        <span id="watchSee">已想看</span>
                    </div>

                    <div th:if="${movieDetailVo.whetherWatch==1 || movieDetailVo.whetherWatch==null}">
                        <i id="watchImg"
                           style="background: url() no-repeat 1px 2px;"></i>
                        <span id="watchSee">想看</span>
                    </div>

                </a>
                <a href="javascript:void(0);" data-toggle="modal" data-target="#myModal">
                    <div th:if="${movieDetailVo.myMovieComments!=null}">
                        <i id="commentImg"
                           style="background: url() no-repeat 1px 2px;"></i>
                        <span id="commentInfo"
                              th:if="${movieDetailVo.myMovieComments.level==1 || movieDetailVo.myMovieComments.level==2}"
                              th:text="${#numbers.formatInteger(movieDetailVo.myMovieComments.level,0)+'分，超烂啊'}">评分</span>
                        <span id="commentInfo"
                              th:if="${movieDetailVo.myMovieComments.level==3 || movieDetailVo.myMovieComments.level==4}"
                              th:text="${#numbers.formatInteger(movieDetailVo.myMovieComments.level,0)+'分，比较差'}">评分</span>
                        <span id="commentInfo"
                              th:if="${movieDetailVo.myMovieComments.level==5 || movieDetailVo.myMovieComments.level==6}"
                              th:text="${#numbers.formatInteger(movieDetailVo.myMovieComments.level,0)+'分，一般般'}">评分</span>
                        <span id="commentInfo"
                              th:if="${movieDetailVo.myMovieComments.level==7 || movieDetailVo.myMovieComments.level==8}"
                              th:text="${#numbers.formatInteger(movieDetailVo.myMovieComments.level,0)+'分，比较好'}">评分</span>
                        <span id="commentInfo" th:if="${movieDetailVo.myMovieComments.level==9}"
                              th:text="${#numbers.formatInteger(movieDetailVo.myMovieComments.level,0)+'分，棒极了'}">评分</span>
                        <span id="commentInfo" th:if="${movieDetailVo.myMovieComments.level==10}"
                              th:text="${#numbers.formatInteger(movieDetailVo.myMovieComments.level,0)+'分，完美'}">评分</span>

                    </div>
                    <div th:if="${movieDetailVo.myMovieComments==null}">
                        <i id="commentImg"
                           style="background: url() no-repeat"></i>
                        <span id="commentInfo">评分</span>
                    </div>
                    <!--白色url() no-repeat-->
                    <!--黄色url() no-repeat 1px 2px;"-->
                </a>
            </div>

            <!--<span th:text="${movieDetailVo.releaseDate.getTime()}"></span>-->
            <!--<span th:text="${#dates.createToday().getTime()}"></span>-->
            <!--还未上映-->
            <div class="watching" th:if="${movieDetailVo.releaseDate.getTime()>=#dates.createToday().getTime()}">
                <p class="name">想看数</p>
                <p class="wantnum" th:text="${movieDetailVo.watchNumber}">12421424524</p>
                <p class="money">票房</p>
                <p class="num">3000 <span>万</span></p>

            </div>


            <!--以上映-->
            <div class="watching" th:if="${movieDetailVo.releaseDate.getTime()<#dates.createToday().getTime()}">
                <p class="name">评分</p>
                <span class="wantnum" style="font-size: 30px;position: relative;top: -10px;"
                      th:text="${movieDetailVo.grade}"></span>
                <div class="my-ratingz jq-stars" style="position: relative;top: -28px;"></div>
                <span style="position: relative;left: -50px;font-size: 12px;top: -10px"
                      th:text="${movieDetailVo.commentNumber+'人评分'}">2人评分</span>
                <p class="money">票房</p>
                <p class="num">3000 <span>万</span></p>

            </div>
        </div>
    </div>
</div>
<!-- 页面主体 -->
<div class="container">
    <!-- 左部主题内容 -->
    <div class="main">
        <!-- 标签导航 -->
        <div class="nav">
            <a th:href="@{/}">
                猫眼电影
            </a> >
            <a th:href="@{/}">
                电影
            </a> >
            <span th:text="${movieDetailVo.name}">
                    天气之子
                </span>
        </div>
        <!-- 标签页切换控制 -->
        <div class="tab-contral">
            <div class="tab active" id="referral">介绍</div>
            <div class="tab" id="actor">演职人员</div>
            <div class="tab" id="awards">奖项</div>
            <div class="tab" id="imgs">图集</div>
        </div>
        <div class="border"></div>
        <!-- 剧情简介 -->
        <div class="referral">
            <div class="intro">
                剧情简介
            </div>
            <p th:text="${movieDetailVo.synopsis}">
                在高一的夏天，少年帆高（醒弱虎汰朗配音）离家出走，一个人来到东京。帆高好不容易找到一份工作，为一本古怪的“神秘学杂志”写稿，生活孤单贫苦。连日的湾泡大雨，像是来映衬他的失落。在纷纭杂省的大都会一角，帆高遇上了一个可爱少女阳莱（森七菜配音）。阳莱和弟弟相依为命，个性坚强、开朗，但她心中隐藏着一个重大秘密—每当她说：“现在开始天晴了！”雨便渐渐停下来，美丽的阳光洒落街上。原来，她拥有一股不可思议的能量，一股能让天空放睛的异力</p>
        </div>
        <!-- 演职人员 -->
        <div class="actor" style="width: 1000px">
            <div class="intro">
                <div class="intro-text">
                    <span>演职人员</span>
                    <span>
                            <a href="#">
                                全部>
                            </a>
                        </span>
                </div>
            </div>
            <div class="starts">
                <p>导演</p>
                <div class="start" th:each="movieActor:${movieDetailVo.getMovieActors()}">
                    <div th:if="${movieActor.portray==null}">
                        <img src="/static/images/新海诚.jpg" th:src="${movieActor.pictureUrl}"
                             style="width: 128px;height: 170px" alt="">
                        <p th:text="${movieActor.name}">新海诚</p>
                    </div>
                </div>
            </div>
            <div class="starts">
                <p>演员</p>
                <div class="start" th:each="movieActor:${movieDetailVo.getMovieActors()}">
                    <div th:if="${movieActor.portray!=null}">
                        <img class="default-img" alt="天气之子 醍醐虎汰朗" th:src="${movieActor.pictureUrl}"
                             src="https://p0.meituan.net/moviemachine/74cf5577c9cf7c2bf60f3c023c37135f158637.jpg@128w_170h_1e_1c">
                        <p th:text="${movieActor.name}">醍醐虎汰朗</p>
                        <p th:text="${'饰:'+movieActor.portray}">饰:森鸟帆高</p>
                    </div>
                </div>

            </div>
        </div>
        <!-- 奖项 -->
        <div class="awards">
            <div class="intro">
                <div class="intro-text">
                    <span>奖项</span>
                    <span>
                            <a href="#">
                                全部>
                            </a>
                        </span>
                </div>
            </div>
            <div class="awards-body">
                <ul>
                    <li class="awards-model">
                        <div class="awards-img">
                            <img src="https://p0.meituan.net/movie/04d8bf2467f29ea0b72491587f8b34f95687.jpg@50w_50h_1e_1c"
                                 alt="">
                        </div>
                        第43届日本电影学院奖
                        <div class="awards-text">
                            获奖：最佳动画片 / 最佳配乐
                        </div>
                    </li>
                    <li class="awards-model">
                        <div class="awards-img">
                            <img src="https://p0.meituan.net/movie/a9f2bda1bf18b199972d69d1512840ed6444.jpg@50w_50h_1e_1c"
                                 alt=""></div>
                        第47届安妮奖
                        <div class="awards-text">
                            提名：最佳动画视觉效果 / 最佳独立动画长片 / 最佳动画导演 / 最佳动画剧本
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 图集 -->
        <div class="images">
            <div class="intro">
                <div class="intro-text">
                    <span>图集</span>
                    <span>
                            <a href="#">
                                全部>
                            </a>
                        </span>
                </div>
            </div>
            <div class="images-main">
                <a href="#">
                    <img class="default-img" alt="天气之子剧照图集"
                         th:src="${movieDetailVo.getMoviePictureSets().get(0).pictureUrl}"
                         src="https://p0.meituan.net/movie/95300ef2d49506fd68a2a56897bc5043315152.jpg@465w_258h_1e_1c">
                </a>
            </div>
            <div class="images-aside">
                <div class="aside-img1" th:each="moviePictureSet:${movieDetailVo.getMoviePictureSets()}">
                    <img class="default-img" alt="天气之子剧照图集"
                         th:src="${moviePictureSet.pictureUrl}"
                         th:if="${moviePictureSet.state eq 0}"
                         src="https://p0.meituan.net/movie/11e1b4c016551a5f8be80612f6062a7d131097.jpg@126w_126h_1e_1c">
                </div>
            </div>
        </div>
        <!-- 评论 -->
        <div class="comment">
            <div class="intro">
                <div class="intro-text">
                    <span>热门短评</span>
                    <span>
                            <a href="javascript:void(0);" data-toggle="modal" data-target="#myModal">
                                写短评
                            </a>
                        </span>
                </div>
            </div>

            <div class="comment-body">
                <ul>
                    <li class="comment-model" th:each="movieComment,iterStat:${movieDetailVo.movieComments}">
                        <img src="https://p0.meituan.net/movie/04d8bf2467f29ea0b72491587f8b34f95687.jpg@50w_50h_1e_1c"
                             alt="" th:src="${movieComment.headImgUrl}" style="width: 60px;height: 60px">
                        <div class="comment-text">
                            <div class="comment-main">
                                <span class="username">[[${movieComment.nickname}]]<span class="tag">购</span></span>
                                <div>
                                        <span>
                                            <span class="comment-time"
                                                  th:text="${#dates.format(movieComment.createDate,'yyyy-MM-dd')}">2019-11-02</span>
                                        <div th:class="${'my-rating'+iterStat.index+' jq-stars'}"></div>
                                        </span>
                                    <a href="javascript:void(0)"
                                       th:onclick="giveLike([[${movieComment.id+''}]],[[${movieComment.movieId+''}]],[[${iterStat.index}]])">
                                        <i class="giveLikeImg" th:if="${movieComment.whetherGiveLike}"
                                           style="background:url()"></i>
                                        <i class="giveLikeImg" th:if="${!movieComment.whetherGiveLike}"
                                           style="background:url();"></i>
                                        <span class="giveLikeNum" th:text="${movieComment.num}">8585</span>
                                    </a>
                                    <!--白色url();-->
                                    <!--红色url()-->
                                </div>
                            </div>
                            <p th:text="${movieComment.context}">
                                快30岁的人了独自跑去看，进了影院发现全是小年轻，还是比较尴尬的。08年高考前一年我和她还在为艺考奔波，她用U盘给我看了秒速五厘米，后来陆续接触了遥远世界，星之声，云之彼端，她和她的猫，被极其干净漂亮的场设吸引，从小被日漫熏陶下大学选择了动画制作专业，至此和她相隔两地。虽然那么多年过去，动画制作没有成为我的职业，倒是没想到我居然会和秒5里的剧情遭遇如此一样，我心里的她，那个放学等我坐在画室窗边金黄阳光下的马尾辫女孩早已是别人的妻子和一位母亲了，我依旧还单身，长大了明白了太多，以前热血纯洁的时光也走了。只能偶尔偷偷回忆一下。onemoretimeonemorechance也是我唯一会唱的日语歌。
                            </p>
                        </div>
                        <script>
                            $(function () {
                                $(".my-rating[[${iterStat.index}]]").starRating({
                                    initialRating: [[${movieComment.level/2}]],
                                    starSize: 15,
                                    useGradient: true,
                                    readOnly: true
                                });
                            })
                        </script>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 影片资料 -->
        <div class="movie-deta">
            <div class="intro">
                <div class="intro-text">
                    <span>影片资料</span>
                </div>
            </div>
            <div class="deta-body">
                <div class="deta-model">
                    <div class="model-top">
                        <img class="attribute-item-icon"
                             src="https://p0.meituan.net/mmdb/250a17bc199c0b942073bec5429d2f422175.png@14w_14h_1e_1c">
                        <span>家长引导</span>
                    </div>
                    <div class="model-bottom">
                        本片在日本的评级为【G】，适合任何年龄观看。
                    </div>
                </div>
                <div class="deta-model">
                    <div class="model-top">
                        <img class="attribute-item-icon"
                             src="https://p0.meituan.net/mmdb/1764aeeb280e07c55b861481cc717e2c1511.png@14w_14h_1e_1c">
                        <span>出品发行</span>
                    </div>
                    <div class="model-bottom">
                        日本东宝株式会社
                    </div>
                </div>
                <div class="deta-model">
                    <div class="model-top">
                        <img class="attribute-item-icon"
                             src="https://p0.meituan.net/mmdb/250a17bc199c0b942073bec5429d2f422175.png@14w_14h_1e_1c">
                        <span>技术参数</span>
                    </div>
                    <div class="model-bottom">
                        彩色
                    </div>
                </div>
            </div>
        </div>
        <!-- 获奖详情 -->
        <div class="honor">
            <div class="intro">
                <div class="intro-text">
                    <span>荣誉奖项</span>
                </div>
            </div>
            <div class="honor-body">
                <div class="body-model">
                    <p>3次</p>
                    <p>获奖</p>
                </div>
                <div class="center body-model">
                    <p>5次</p>
                    <p>提名</p>
                </div>
                <div class="right body-model">
                    <p>第43届日本电影学院奖</p>
                    <p>最佳动画片</p>
                </div>
            </div>
        </div>
        <!-- 票房成绩 -->
        <div class="honor">
            <div class="intro">
                <div class="intro-text">
                    <span>票房</span>
                    <span>
                            <a href="#">
                                票房详情>
                            </a>
                        </span>
                </div>
            </div>
            <div class="honor-body">
                <div class="body-model">
                    <p>15638</p>
                    <p>首周票房(万)</p>
                </div>
                <div class="body-model">
                    <p>28871</p>
                    <p>累计票房(万)</p>
                </div>

            </div>
        </div>
        <!-- 电影原声 -->
        <div class="music">
            <div class="intro">
                <div class="intro-text">
                    <span>电影原声</span>
                </div>
            </div>
            <div class="music-body">
                <div class="music-model">
                    <img class="film-music-icon"
                         src="https://p0.meituan.net/scarlett/52ed06a649b14df78ebee02e9959c32911524.png@140w_140h_1e_1c"
                         alt="电影原声">
                    <div class="text">
                        <p>祝祭</p>
                        <p>盖盖Nyan</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 侧边栏 -->
    <div class="aside" style="margin-left: 100px">
        <!-- 预告片 -->
        <div class="trailer">
            <div class="tab-contral">
                <div class="tab active" id="trailer">预告片</div>
                <div class="tab" id="other">相关资讯</div>
            </div>
            <div class="border"></div>

            <div class="trailer-video">
                <div class="referral">
                    <div class="intro">
                        预告片
                    </div>
                </div>
                <!--<video src="/static/media/login-video.mp4" controls autoplay></video>-->
            </div>
        </div>
        <!-- 相关电影 -->
        <div class="other-movie">
            <div class="referral">
                <div class="intro">
                    相关电影
                </div>
            </div>
            <div class="other-movie-body">
                <ul>
                    <li class="othermovie-model">
                        <a href="#">
                            <img alt="你的名字。海报封面"
                                 src="https://p1.meituan.net/movie/04de313fdd7f3835563d3c4bdfb980735556062.jpg@106w_145h_1e_1c">
                            <p>你的名字</p>
                        </a>
                        <i>9.2</i>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>

<!-- 评论模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">评分</h4>
            </div>
            <center>
                <div class="modal-body">
                    <p>请点击星星评分</p>
                    <div class="my-rating jq-stars"></div>
                    <input type="hidden" id="level">
                    <textarea placeholder="快来说说你的看法吧" name="content" id="context" cols="30" rows="10"
                              style="border: 1px solid red;width: 500px"></textarea>
                </div>
            </center>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" th:onclick="grade([[${movieDetailVo.id+''}]])">提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>

<!-- 页面底部 -->
<div th:replace="common/bottom::#bottom"></div>

<script src="/static/js/jquery.star-rating-svg.js"></script>
<script src="/static/js/ajax.js"></script>
<script src="/static/js/mock-min.js"></script>
<script src="/static/js/server.js"></script>
<script>
    $(function () {
        $(".my-rating").starRating({
            initialRating: 0,
            starSize: 25,
            useGradient: true,
            callback: function (currentRating) {
                $("#level").val(currentRating * 2)
            }
        });

        $(".my-ratingz").starRating({
            initialRating: [[${movieDetailVo.grade/2}]],
            starSize: 10,
            useGradient: true,
            readOnly: true
        });


    });

    //点赞
    function giveLike(id, movieId, index) {
        $.ajax({
            url: "/movie/comment/giveLike/" + id + "/" + movieId,
            type: "post",
            success: function (response) {
                if (response.code == 3001) {
                    //已点赞
                    $(".giveLikeImg").eq(index).css("background", "url(")
                    $(".giveLikeNum").eq(index).html(parseInt($(".giveLikeNum").eq(index).html()) + 1)
                } else if (response.code == 3002) {
                    //取消点赞
                    $(".giveLikeImg").eq(index).css("background", "url()")
                    $(".giveLikeNum").eq(index).html(parseInt($(".giveLikeNum").eq(index).html()) - 1)
                } else if (response.code == 1004) {
                    location.href = "/login.html"
                } else {
                    alert("点赞失败 服务异常 请稍后重试")
                }
            },
            error: function (response) {
                if (response.status == 403) {
                    alert("权限不足")
                } else {
                    alert("点赞失败 服务异常 请稍后重试")
                }

            }
        })
    }

    //想看
    function wantSee(id) {
        $.ajax({
            url: "/movie/wantSee/" + id,
            type: "post",
            success: function (response) {
                if (response.code == '2001') {
                    //已点击了
                    $("#watchSee").html("已想看");
                    $("#watchImg").css("background", "url() no-repeat 1px 2px")
                } else if (response.code == '2002') {
                    //未点击了
                    $("#watchSee").html("想看");
                    $("#watchImg").css("background", "url() no-repeat 1px 2px")
                    $("#commentImg").css("background", "url() no-repeat")
                    $("#commentInfo").html("评分")
                } else if (response.code == 1004) {
                    location.href = "/login.html"
                } else {
                    alert("服务器发生异常 请稍后重试")
                }
            }
        })
    }

    //评论
    function grade(id) {
        $.ajax({
            url: "/movie/comment/add",
            data: {
                context: $("#context").val(),
                level: $("#level").val(),
                movieId: id
            },
            type: "post",
            success: function (response) {
                if (response.code == 0) {
                    //更新页面
                    $("#watchSee").html("已想看");
                    $("#watchImg").css("background", "url() no-repeat 1px 2px")
                    $("#commentImg").css("background", "url() no-repeat 1px 2px")
                    if (response.data.level == 1 || response.data.level == 2) {
                        $("#commentInfo").html(response.data.level + "分，超烂的")
                    } else if (response.data.level == 3 || response.data.level == 4) {
                        $("#commentInfo").html(response.data.level + "分，比较差的")
                    } else if (response.data.level == 5 || response.data.level == 6) {
                        $("#commentInfo").html(response.data.level + "分，一般般的")
                    } else if (response.data.level == 7 || response.data.level == 8) {
                        $("#commentInfo").html(response.data.level + "分，一般般")
                    } else if (response.data.level == 9) {
                        $("#commentInfo").html(response.data.level + "分，超棒的")
                    } else if (response.data.level == 10) {
                        $("#commentInfo").html(response.data.level + "分，完美")
                    }
                    $('#myModal').modal('hide')
                } else if (response.code == 1004) {
                    location.href = "/login.html"
                } else {
                    alert("服务器异常 请稍后重试")
                }
            }
            , error: function (response) {
                if (response.status == 403) {
                    alert("权限不足")
                } else {
                    alert("服务器异常 请稍后重试")
                }
            }
        })
    }


</script>
</body>

</html>